<div class="info-header" i-dom="header">
    {{if type == 'success'}}
    <div class="info-img">
        <img src="img/tips_SUCCESS.png">
    </div>
    {{/if}}
    {{if type == 'error'}}
    <div class="info-img">
        <img src="img/tips_ERROR.png">
    </div>
    {{/if}}
    <h6>
        {{message}}
    </h6>
</div>

<div class="info-footer" i-dom="footer">
    <h5>{{tips}}</h5>
    {{if redirect}}
    <button i-tap="redirect">
        {{button}}
    </button>
    {{/if}}
</div>

<style>
    .info-header, .info-footer {
        position: absolute;
        width: 100%;
    }

    div {
        text-align: center;
    }

    img {
        width: 100%;
    }

    h6 {
        font-weight: lighter;
        font-size: 14px;
        padding: 4px;
    }

    h5 {
        font-weight: lighter;
        font-size: 12px;
        padding: 8px;
        color: #888888;
    }

    button {
        display: block;
        margin: auto;
        width: 100px;
        height: 36px;
        line-height: 36px;
        background: #111111;
        color: #f9e043;
        font-size: 13px;
    }
</style>